import { createSlice } from '@reduxjs/toolkit';

interface SafeArea {
    left: string;
    right: string;
    top: string;
    bottom: string
}

const defaultValue: SafeArea = {
    left: '0px',
    right: '0px',
    top: '0px',
    bottom: '0px',
}

export const safeAreaSlice = createSlice({
    name: 'safeArea',
    initialState: defaultValue,
    reducers: {
        updateTop: (state, action) => {
            state.top = action.payload
        },
        updateLeft: (state, action) => {
            state.left = action.payload
        },
        updateRight: (state, action) => {
            state.right = action.payload
        },
        updateBottom: (state, action) => {
            state.bottom = action.payload
        },
        update: (state, aciton) => {
            if (typeof aciton.payload === 'object') {
                return {
                    ...state,
                    ...aciton.payload
                }
            }
            return state
        },

        clear: (state) => {
            return {
                ...state,
                ...defaultValue
            }
        }
    },
});

export const { updateTop, updateLeft, updateRight, updateBottom, update, clear } = safeAreaSlice.actions;

export default safeAreaSlice.reducer;